<template>
  <div class="cons">
    <div class="mb-15">
      <div class="title">{{ $t('共识订单') }}</div>

      <div class="bcl-bg radius fz-12" style="padding: 1px">
        <div class="box-white">
          <div class="flex flex-wrap bd-bottom pb-10 mb-10">
            <div style="width: 50%">
              <span class="cl-basic mr-5">{{ $t('总共识额') }}:</span>
              <span>{{ toFixed(detail?.order?.total_u) }} U</span>
            </div>
            <div style="width: 50%">
              <span class="cl-basic mr-5">{{ $t('共识等级') }}:</span>
              <span>V{{ detail?.order?.level }}</span>
            </div>
            <div style="width: 50%">
              <span class="cl-basic mr-5">{{ $t('完成额度') }}:</span>
              <span>{{ toFixed(detail?.order?.end_u) }} U</span>
            </div>
            <div style="width: 50%">
              <span class="cl-basic mr-5">{{ $t('激活额度') }}:</span>
              <span>{{ toFixed(detail?.order?.open_u) }} U</span>
            </div>
          </div>

          <div class="flex flex-wrap bd-bottom pb-10 mb-10">
            <div style="width: 50%">
              <span class="cl-basic mr-5">{{ $t('间推收益') }}:</span>
              <span>{{ toFixed(detail?.order?.grand_profit) }} U</span>
            </div>
            <div style="width: 50%">
              <span class="cl-basic mr-5">{{ $t('直推收益') }}:</span>
              <span>{{ toFixed(detail?.order?.parent_profit) }} U</span>
            </div>
            <div style="width: 50%">
              <span class="cl-basic mr-5">{{ $t('静态收益') }}:</span>
              <span>{{ toFixed(detail?.order?.total_profit) }} U</span>
            </div>
            <div style="width: 50%">
              <span class="cl-basic mr-5">{{ $t('激活额度') }}:</span>
              <span>{{ toFixed(detail?.order?.open_real) }} PC</span>
            </div>
            <div style="width: 100%">
              <span class="cl-basic mr-5">{{ $t('预计完成额度') }}:</span>
              <span>{{ toFixed(detail?.order?.end_amount) }} PC</span>
            </div>
          </div>

          <div class="flex flex-cc">
            <img
              class="mr-5"
              style="width: 10px"
              src="../assets/img/icon_circle.png"
            />
            <div class="fz-12">
              <span>{{ $t('完成共识时间') }}:</span>
              <span v-if="detail?.order?.end_time">
                {{ formatDateTime(detail?.order?.end_time) }}
              </span>
              <span v-else>{{ $t('无') }}</span>
            </div>
          </div>
        </div>

        <div class="flex flex-rb box">
          <van-button
            style="width: 140px; height: 40px"
            round
            :type="isCanOpen ? 'primary' : 'default'"
            :disabled="!isCanOpen"
            @click="emit('open')"
          >
            {{ $t('激活共识') }}
          </van-button>

          <van-button
            style="width: 140px; height: 40px"
            round
            :type="isCanFinish ? 'primary' : 'default'"
            :disabled="!isCanFinish"
            @click="emit('finish')"
          >
            {{ $t('完成共识') }}
          </van-button>
        </div>
      </div>
    </div>

    <div>
      <div class="title">{{ $t('共识明细') }}</div>

      <div v-if="orders.length">
        <ul class="flex flex-rb flex-wrap fz-12">
          <li
            class="box-white bcl-bg p-15 mb-15"
            style="width: calc(50% - 7.5px)"
            v-for="v in orders"
            :key="v"
          >
            <div class="bd-bottom pb-10 mb-10" style="border-color: #ebebeb">
              <div>
                <span class="cl-basic mr-5">{{ $t('金额') }}:</span>
                <span>{{ v.total_u }} U</span>
              </div>
              <div>
                <span class="cl-basic mr-5">{{ $t('状态') }}:</span>
                <span>{{ states[v.state] }}</span>
              </div>
            </div>

            <div class="fz-12">
              <span>{{ $t('激活时间') }}:</span>
              <span v-if="v.open_time">
                {{ formatDateTime(v.open_time, 'YYYY.MM.DD') }}
              </span>
              <span v-else>{{ $t('无') }}</span>
            </div>
          </li>
        </ul>

        <!-- 分页 -->
        <van-pagination
          class="mt-10"
          mode="simple"
          :prev-text="$t('上一页')"
          :next-text="$t('下一页')"
          :total-items="total"
          :items-per-page="size"
          @change="getLevelOrderList"
          v-model="page"
        ></van-pagination>
      </div>

      <van-empty :description="$t('暂无数据')" v-else></van-empty>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { formatDateTime, toFixed } from 'js/utils'
import api from 'js/api'

const emit = defineEmits(['open', 'finish'])

const states = ref([
  $t('待开启'),
  $t('已开启'),
  $t('待结束'),
  $t('已结束'),
  $t('待兑现'),
  $t('已兑现'),
  $t('已解约'),
  $t('已弃约'),
])

// 共识详情
const detail = inject('detail')

// 共识明细
const orders = ref([])
const page = ref(1)
const size = ref(5)
const total = ref(0)

// 是否可以激活共识
const isCanOpen = computed(() => {
  return detail.value?.order?.state == 0
})

// 是否可以完成共识
const isCanFinish = computed(() => {
  return detail.value?.order?.state == 2
})

getLevelOrderList()

// 获取共识明细
async function getLevelOrderList() {
  const params = {
    page: page.value,
    limit: size.value,
  }

  const { code, data } = await api.getLevelOrderList(params)

  if (code === 1) {
    orders.value = data?.data || []
    total.value = data?.total || 0
  }
}
</script>

<style lang="scss" scoped></style>
